/*
 * Speaker Background
 */

ion-toolbar {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  --background: transparent;
  --color: white;
}

ion-toolbar ion-button,
ion-toolbar ion-back-button,
ion-toolbar ion-menu-button {
  --color: white;
}

.speaker-background {
  position: relative;

  display: flex;

  padding-top: var(--ion-safe-area-top);

  align-items: center;
  justify-content: center;

  flex-direction: column;

  height: calc(250px + var(--ion-safe-area-top));

  background: center / cover url(/assets/img/speaker-background.png) no-repeat;
}

.speaker-background img {
  width: 70px;
  border-radius: 50%;
  margin-top: calc(-1 * var(--ion-safe-area-top));
}

.speaker-background h2 {
  position: absolute;

  bottom: 10px;

  color: white;
}

.md .speaker-background {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

.ios .speaker-background {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px;
}

/*
 * Speaker Details
 */

.speaker-detail p {
  margin-left: 6px;
  margin-right: 6px;
}

.speaker-detail hr {
  margin-top: 20px;
  margin-bottom: 20px;

  background: var(--ion-color-step-150, #d7d8da);
}
